<template>
    <div class="bg01">
        <div class="header">
            <h1 class="header-title">昆山市乱占耕地建房平台</h1>
            <div id="logInfo" style="text-align: left;color: #fff;position: relative;left: 10px;">
            </div>
        </div>



        <div class="wrapper">
            <div class="content">
                <div class="col col-l">
                    <div class="xpanel-wrapper xpanel-wrapper-55">
                        <div class="xpanel xpanel-l-t">
                            <div class="title">昆山市概况</div>
                            <div class="bcontent">
                                <ul>
                                    <li class="leftrt">耕地面积：</li>
                                    <li class="rightrt">436.8万亩</li>
                                    <li class="leftrt">苏州概况：</li>
                                    <li class="rightrt">
                                        昆山市，古名“娄邑”，别称“鹿城”，江苏省辖县级市，由苏州市代管，是江苏省直管试点市，地处江苏省东南部、上海市与苏州市之间，北至东北与常熟市、太仓市相连，南至东南与上海市嘉定区、青浦区接壤，西与苏州市区、吴江区交界，属长江三角洲太湖平原，为北亚热带南部季风气候，总面积931平方千米。截至2025年2月，昆山市辖10个镇。截至2024年末，昆山市户籍人口129.46万人。
                                    </li>
                                </ul>
                                <ul>
                                    <img src="../img/kunshan.png" alt="">
                                </ul>


                            </div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-45">
                        <div class="xpanel xpanel-l-b">
                            <div class="title">被占耕地整改率</div>
                            <div id="ryCharts" class="bcontent">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col col-c">

                    <!-- <div id="map" class="map" style="width: 100%;height: 100%;background-color: rgba(89, 91, 127, 0);;"></div> -->
                    <!-- 地图容器 -->
                    <div id="map" class="map" ref="mapContainer">
                        <!-- 显示经纬度 -->
                        <div id="mouse-position" class="mouse-position"></div>
                        <!-- 属性弹窗 -->
                        <div id="popup" class="ol-popup">
                            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                            <div id="popup-content"></div>
                        </div>
                    </div>
                </div>
                <div class="col col-r">
                    <div class="xpanel-wrapper xpanel-wrapper-25">
                        <div class="xpanel xpanel-r-t">
                            <div class="title">月度耕地被占情况</div>
                            <div id="jqCharts" class="bcontent">

                            </div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-25">
                        <div class="xpanel xpanel-r-m">
                            <div class="title">违章情况分析率</div>
                            <div id="wzCharts" class="bcontent">

                            </div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-45">
                        <div class="xpanel xpanel-r-b">
                            <div class="title">耕地情况</div>
                            <div id="wlCharts" class="bcontent">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
// import TainDiTuMap from '@/views/Map.vue';
import { defaults as defaultInteractions } from 'ol/interaction';
import { Map, View } from 'ol';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import MVT from 'ol/format/MVT';
// import Tile from 'ol/layer/Tile';
// import XYZ from 'ol/source/XYZ';
import { get as getProjection } from 'ol/proj';
import Overlay from 'ol/Overlay.js';
import { toStringHDMS } from 'ol/coordinate.js';
import { toLonLat } from 'ol/proj.js';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import { fromLonLat } from 'ol/proj';
import Circle from 'ol/style/Circle';
import tinycolor from 'tinycolor2';
import * as echarts from 'echarts';

// import TainDiTuMap from '@/components/BaseMapControls.vue';
export default {
    name: 'TainDiTuMap', // 使用多词命名
    components: {

    },
    mounted() {
        this.initMap();
        this.mapRect = this.$refs.mapContainer.getBoundingClientRect();
        document.addEventListener('fullscreenchange', () => {
            this.fullScreen = !!document.fullscreenElement;
            this.map.updateSize();
        });
        // 初始化右侧面板的 ECharts 图表
        this.initRightPanelCharts();
        // 初始化左侧面板的 ECharts 图表（新增）
        this.initLeftPanelCharts();
    },
    data() {
        return {
            ryChart: null, // 新增
            jqChart: null,
            wzChart: null,
            wlChart: null,

            map: null,
            popupContent: '',
            popupX: 0,
            popupY: 0,
            yiyuan: null,
            mapRect: null, // 用于保存地图容器的位置信息
            layerControlVisible: false,
            layerLabels: { // 图层名称映射为中文名（可选）
                vectorLayer_building: '建筑',
                tilelayers3: '卫星影像',
                rasterTile: '栅格图层'
            },
            layerGroups: [
                {
                    name: 'base',
                    label: '基础图层',
                    layers: [
                        {
                            key: 'tilelayers3',
                            name: '卫星影像',
                            visible: true,
                            opacity: 1,
                            zIndex: 0
                        }
                    ]
                },
                {
                    name: 'vector',
                    label: '矢量图层',
                    layers: [
                        {
                            key: 'vectorLayer_building',
                            name: '建筑',
                            visible: true,
                            opacity: 1,
                            zIndex: 1
                        }
                    ]
                },
                {
                    name: 'raster',
                    label: '栅格图层',
                    layers: [
                        {
                            key: 'rasterTile',
                            name: '栅格图层',
                            visible: true,
                            opacity: 1,
                            zIndex: 1
                        }
                    ]
                }
            ],
            layerTypes: {
                vectorLayer_building: 'vector',
                tilelayers3: 'base'
            },
            measureInteraction: null,
            lastCoordinate: null,
            vectorLayer_building: null,
            tilelayers3: null,
            rasterTile: null,
            measureType: null, // 'LineString' | 'Polygon'
            measureTooltipElement: null,
            measureTooltipOverlay: null,
            showPopup: true, // 控制弹窗是否显示，默认为不显示
            vectorTileParams: { //  矢量切片参数
                name: 'roads',
                lowLevel: 0,
                highLevel: 6,
                path: 'D:\\BaiduSyncdisk\\工作\\uni-app\\f0716\\f0716\\static\\data\\shp\\acc.shp',
                savePath: 'D:\\data'
            },
            showParamsForm: false, // 显示参数表单，默认为不显示
            showRasterForm: false,
            rasterParams: {
                name: 'tif',
                lowLevel: 0,
                highLevel: 6,
                path: 'D:\\BaiduSyncdisk\\工作\\uni-app\\f0716\\f0716\\static\\data\\50.tif',
                savePath: 'D:\\data\\raster'
            },
            fullScreen: false, // 控制是否全屏
            isShpUploadExpanded: false, // 是否展开上传shp文件
            uploadedFileName: '',
            uploadError: '',
            rasterUploadExpanded: false,
            uploadedRasterName: '',
            uploadRasterError: '',
        };
    },
    methods: {
        initMap() {
            // 获取传入的地图范围参数
            const route = this.$route;
            console.log('route:', route.query.lng);
            let center = fromLonLat([120.943, 31.321]); // 默认镇江坐标
            let zoom = 13;

            if (route.query.lng && route.query.lat) {
                try {
                    const lng = parseFloat(route.query.lng);
                    const lat = parseFloat(route.query.lat);
                    center = fromLonLat([lng, lat]);
                    zoom = 16; // 放大级别
                } catch (e) {
                    console.warn('无效的地图坐标:', route.query);
                }
            }

            const view = new View({
                center: center,
                zoom: zoom,
                projection: 'EPSG:3857'
            });
            /**
              * Elements that make up the popup.
              */
            const container = document.getElementById('popup');
            const content = document.getElementById('popup-content');
            const closer = document.getElementById('popup-closer');
            /**
              * Create an overlay to anchor the popup to the map.
              */
            const overlay = new Overlay({
                element: container,
                autoPan: {
                    animation: {
                        duration: 250,
                    },
                },
            });

            /**
             * Add a click handler to hide the popup.
             * @return {boolean} Don't follow the href.
             */
            closer.onclick = function () {
                overlay.setPosition(undefined);
                closer.blur();
                return false;
            };
            this.map = new Map({ // 不赋值给 map 变量
                target: 'map',
                layers: [],
                overlays: [overlay],
                view: view,
                // 👇 禁用默认控件
                controls: [],
                interactions: defaultInteractions({
                    pinchRotate: false, // 关闭旋转
                    altShiftDragRotate: false,
                    zoomWheelFactor: 0.5, // 滚轮缩放速度
                }),
                // updateWhileInteracting: false,
                renderMode: 'fast',
            });
            // ----------------------------------
            // 地图左下角显示坐标
            const mousePositionElement = document.getElementById('mouse-position');

            this.map.getViewport().addEventListener('mousemove', (e) => {
                const pixel = this.map.getEventPixel(e);
                const coordinate = this.map.getCoordinateFromPixel(pixel);

                // 将 EPSG:3857 坐标转换为 WGS84（经纬度）
                const [lon, lat] = toLonLat(coordinate);

                // 显示并保留 6 位小数
                mousePositionElement.textContent = `经度: ${lon.toFixed(6)}, 纬度: ${lat.toFixed(6)}`;
            });
            // ----------------------------------
            // 地图点击事件
            this.map.on('singleclick', (evt) => {
                if (!this.showPopup) {
                    return; // 如果关闭了，则不执行弹窗逻辑
                }
                const pixel = evt.pixel;
                const coordinate = evt.coordinate;
                // 保存点击坐标，用于测量距离和面积
                this.lastCoordinate = coordinate;
                // 获取点击位置的 feature
                const feature = this.map.forEachFeatureAtPixel(pixel, (feature) => {
                    return feature;
                });

                if (feature) {
                    // 获取 feature 的属性
                    const properties = feature.getProperties();
                    // 获取 feature 所属图层名称
                    const layer = this.map.getLayers().item(1);
                    console.log(layer);
                    const layerName = layer && layer.get('name') ? layer.get('name') : '未知图层';

                    // 构建表格 HTML
                    let tableHtml = `
                        <p>图层：<strong>${layerName}</strong></p>
                        <table style="width:100%; border-collapse: collapse; margin-top: 8px;">
                            <thead>
                            <tr style="background-color: #f2f2f2;">
                                <th style="text-align:center; padding: 6px; border: 1px solid #ccc;">属性名</th>
                                <th style="text-align:center; padding: 6px; border: 1px solid #ccc;">属性值</th>
                            </tr>
                            </thead>
                            <tbody>
                        `;

                    Object.entries(properties).forEach(([key, value]) => {
                        tableHtml += `
                            <tr>
                            <td style="padding: 4px 6px; border: 1px solid #ccc;">${key}</td>
                            <td style="padding: 4px 6px; border: 1px solid #ccc;">${value}</td>
                            </tr>
                        `;
                    });

                    tableHtml += '</tbody></table>';

                    content.innerHTML = tableHtml;
                } else {
                    // 没有点中要素时显示坐标
                    const hdms = toStringHDMS(toLonLat(coordinate));
                    content.innerHTML = '<p>你点击的位置：</p><code>' + hdms + '</code>';
                }

                overlay.setPosition(coordinate);
            });
            this.addLayer();
        },
        addLayer() {
            // ----------------------------------
            // 添加矢量瓦片图层
            var layerName = 'roads'; // 动态变量
            this.vectorLayer_building = new VectorTileLayer({
                title: "vector",
                name: "OSM道路",
                source: new VectorTileSource({
                    format: new MVT(),
                    url: `http://124.70.132.64:8031/spatial/vectorPostGisTile/{z}/{x}/{y}.pbf?name=${layerName}`,
                    projection: getProjection('EPSG:3857'),
                    minZoom: 12,
                }),
            });
            var layerName1 = 'yiyuan3857'; // 动态变量
            this.yiyuan = new VectorTileLayer({
                title: "vector",
                name: "医院",
                source: new VectorTileSource({
                    format: new MVT(),
                    url: `http://124.70.132.64:8031/spatial/vectorPostGisTile/{z}/{x}/{y}.pbf?name=${layerName1}`,
                    projection: getProjection('EPSG:3857'),
                }),
                style: new Style({
                    image: new Circle({
                        radius: 6,
                        fill: new Fill({
                            color: '#e74c3c' // 红色填充
                        }),
                        stroke: new Stroke({
                            color: '#ffffff', // 白色描边
                            width: 2
                        })
                    })
                })
            });
            var layerName2 = 'kunshan'; // 动态变量
            const suzhou = new VectorTileLayer({
                title: "vector",
                name: "昆山",
                source: new VectorTileSource({
                    format: new MVT(),
                    url: `http://124.70.132.64:8031/spatial/vectorPostGisTile/{z}/{x}/{y}.pbf?name=${layerName2}`,
                    projection: getProjection('EPSG:3857'),
                }),

            });
            // layerName = 'roads';
            // const vectorLayer_roads = new VectorTileLayer({
            //   title: layerName,
            //   source: new VectorTileSource({
            //     format: new MVT(),
            //     url: `http://localhost:8031/spatial/vectorPostGisTile/{z}/{x}/{y}.pbf?name=${layerName}`,
            //     projection: getProjection('EPSG:3857'),
            //   }),
            // });
            // this.tilelayers3 = new Tile({
            //     title: "base",
            //     name: "天地图影像图层",
            //     source: new XYZ({
            //         url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=053318a29e7ee8be40a0958754cc1827',//053318a29e7ee8be40a0958754cc1827  ；   44ee7488efb523f6c21e2cd4448c79eb
            //         attributions: "天地图卫星影像",
            //         crossOrigin: "anonymous",
            //         wrapX: false,
            //         maxZoom: 15
            //     })
            // })

            // this.map.addLayer(this.tilelayers3);
            this.map.addLayer(suzhou);
            this.map.addLayer(this.vectorLayer_building);
            this.map.addLayer(this.yiyuan);
            this.animateFlowLine();
        },
        animateFlowLine() {
            const CLASS_COLOR_MAP = {
                'primary': '#FF0000',     // 主干道：红色
                'secondary': '#FFA500',   // 次干道：橙色
                'tertiary': '#FFD700',    // 三级道路：金色
                'residential': '#8B4513', // 居住区道路：棕色
                'unclassified': '#A9A9A9' // 未分类道路：灰色
            };

            const getDynamicStyle = (zoom) => {
                return function (feature) {
                    const fclass = feature.get('fclass') || 'unclassified';
                    let baseColor = CLASS_COLOR_MAP[fclass] || CLASS_COLOR_MAP['unclassified'];
                    // 缩小时仅显示主干道
                    if (zoom < 10 && !['primary', 'secondary'].includes(fclass)) {
                        return null; // 不绘制非主要道路
                    }
                    // 根据缩放级别调整颜色深浅（缩放越小表示路网越密集）
                    let darkenFactor = 0;
                    if (zoom < 10) {
                        darkenFactor = 0.3; // 路网密集，颜色更亮
                    } else if (zoom < 12) {
                        darkenFactor = 0.15;
                    }

                    let color = darkenColor(baseColor, darkenFactor);

                    // 根据缩放级别调整线宽
                    let strokeWidth = 2;
                    if (zoom < 10) {
                        strokeWidth = 3; // 密集区域加粗显示
                    } else if (zoom < 12) {
                        strokeWidth = 2.5;
                    }

                    // 创建样式对象
                    return new Style({
                        stroke: new Stroke({
                            color: color,
                            width: strokeWidth
                        })
                    });
                };
            };

            // 将颜色变暗的函数
            function darkenColor(color, factor) {
                const hsl = tinycolor(color).toHsl();
                hsl.l = Math.max(0.2, hsl.l - factor); // 降低亮度
                return tinycolor(hsl).toRgbString();   // 返回 RGB 字符串
            }

            // 初始化样式
            let currentZoom = Math.round(this.map.getView().getZoom());
            this.vectorLayer_building.setStyle(getDynamicStyle(currentZoom));

            // 监听缩放变化并更新样式
            this.map.getView().on('change:resolution', () => {
                const zoom = Math.round(this.map.getView().getZoom());
                if (zoom !== currentZoom) {
                    currentZoom = zoom;
                    this.vectorLayer_building.setStyle(getDynamicStyle(zoom));
                }
            });
        },
        initLeftPanelCharts() {
            this.initRYChart(); // 被占耕地整改率
        },

        initRYChart() {
            const chartDom = document.getElementById('ryCharts');
            if (!chartDom) return;

            const myChart = echarts.init(chartDom);

            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月']
                },
                yAxis: {
                    type: 'value',
                    name: '完成率 (%)',
                    min: 60,
                    max: 100
                },
                series: [{
                    name: '完成率',
                    type: 'line',
                    smooth: true,
                    data: [65, 72, 80, 78, 85, 88],
                    itemStyle: {
                        color: '#3498db'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(52, 152, 219, 0.5)' },
                            { offset: 1, color: 'rgba(52, 152, 219, 0.1)' }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                            borderWidth: 3,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                    }
                }]
            });

        },
        initRightPanelCharts() {
            this.initJQChart(); // 机具管控出勤率
            this.initWZChart(); // 违章情况分析率
            this.initWLChart(); // 物料验收
        },

        initJQChart() {
            const chartDom = document.getElementById('jqCharts');
            if (!chartDom) return;

            const myChart = echarts.init(chartDom);

            myChart.setOption({
                title: {
                    text: '上半年耕地被占情况占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}亩 ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月']
                },
                series: [{
                    name: '被占面积',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}: {d}%'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    data: [
                        { value: 120, name: '1月', itemStyle: { color: '#3498db' } },
                        { value: 135, name: '2月', itemStyle: { color: '#2ecc71' } },
                        { value: 150, name: '3月', itemStyle: { color: '#f1c40f' } },
                        { value: 145, name: '4月', itemStyle: { color: '#e74c3c' } },
                        { value: 160, name: '5月', itemStyle: { color: '#9b59b6' } },
                        { value: 175, name: '6月', itemStyle: { color: '#1abc9c' } }
                    ]
                }]
            });

        },

        initWZChart() {
            const chartDom = document.getElementById('wzCharts');
            if (!chartDom) return;

            const myChart = echarts.init(chartDom);
            myChart.setOption({
                title: { text: '违章情况分析率' },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '违章次数',
                    type: 'line',
                    data: [12, 15, 10, 18, 14, 20],
                    itemStyle: { color: '#e74c3c' }
                }]
            });
        },

        initWLChart() {
            const chartDom = document.getElementById('wlCharts');
            if (!chartDom) return;

            const myChart = echarts.init(chartDom);
            myChart.setOption({
                // title: { text: '耕地情况' },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    // name: '验收状态',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 335, name: '耕种' },
                        { value: 310, name: '未耕种' },
                        { value: 234, name: '被占' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    itemStyle: {
                        borderRadius: 5,
                        borderColor: '#fff',
                        borderWidth: 2
                    }
                }]
            });
        }
    }
}

</script>

<style>
@charset "utf-8";

/********** Global **********/
.bg01 {
    width: 100%;
    height: 100%;
    min-height: 635px;
    background-color: #0f1c30;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

*/ .bg01 {
    margin: 0 auto;
    min-width: 375px;
    max-width: 1920px;
}

.bg01 {
    background-image: url("../img/bg01.png");
}

.bg02 {
    background-image: url("../img/bg02.png");
}

.bg03 {
    background-image: url("../img/bg03.png");
}

.bg04 {
    background-image: url("../img/bg04.png");
}

.header {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 65px;
    max-width: 1920px;
    background: url("../img/header.png") center no-repeat;
    box-sizing: border-box;
}

.header-title {
    margin: 0;
    padding: 0;
    line-height: 50px;
    text-align: center;
    font-size: 22px;
    color: #5dc2fe;
}

.wrapper {
    position: absolute;
    top: 68px;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 555px;
}

/* PC */
@media (max-width:1919px) {
    .header {
        height: 65px;
    }

    .header-title {
        line-height: 50px;
        font-size: 22px;
    }

    .wrapper {
        top: 68px;
    }
}

/* Mobile */
@media (max-width:1279px) {
    .header-title {
        max-width: 96%;
    }

    .wrapper {
        background: none;
    }
}

/********** Content **********/
.content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.col {
    margin: 0px 5px 0px;
    ;
    height: 100%;
    min-width: 320px;
}

.col-l {
    -webkit-flex: 1.5;
    -ms-flex: 1.5;
    flex: 1.5;
}

.col-c {
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4;
}

.col-r {
    -webkit-flex: 1.5;
    -ms-flex: 1.5;
    flex: 1.5;
}

/* PC */
@media (max-width:1919px) {
    .content {
        padding: 10px 0;
    }
}

/* Mobile */
@media (max-width:1279px) {
    .content {
        padding: 10px 0;
    }

    .content {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .col-l,
    .col-c,
    .col-r {
        -webkit-flex: none;
        -ms-flex: none;
        flex: none;
    }
}

.xpanel-wrapper {
    padding-bottom: 5px;
    box-sizing: border-box;
}

.xpanel-wrapper {
    height: 100%;
    width: 100%
}

.xpanel-wrapper-25 {
    height: 27.5%;
}

.xpanel-wrapper-30 {
    height: 30%;
}

.xpanel-wrapper-40 {
    height: 40%;
}

.xpanel-wrapper-45 {
    height: 45%;
}

.xpanel-wrapper-60 {
    height: 60%;
}

.xpanel-wrapper-75 {
    height: 60%;
}

.xpanel-wrapper-55 {
    height: 55%;
}

.xpanel {
    height: 100%;
    min-height: 100px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
}

.xpanel-m-c {
    background-image: url("../img/panel.png");
}

.xpanel-l-t {
    background-image: url("../img/panel.png");
}

.xpanel-l-b {
    background-image: url("../img/panel.png");
}

.xpanel-c-b {
    background-image: url("../img/panel.png");
}

.xpanel-r-t {
    background-image: url("../img/panel.png");
}

.xpanel-r-m {
    background-image: url("../img/panel.png");
}

.xpanel-r-b {
    background-image: url("../img/panel.png");
}

.xpanel .title {
    font-weight: normal;
    color: #fff;
    background-image: url("../img/title-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.xpanel {
    background-image: url('../img/bg01.png');
    background-size: cover;
    background-position: center;
    opacity: 0.9;
    /* 透明度值0-1之间调整 */
}

.xpanel .tcontent {
    font-family: 'Segoe UI', system-ui;
    letter-spacing: 0.5px;
    color: #a1c4fd;
}

/* 标题样式 */
.xpanel .title-long {
    background: linear-gradient(90deg, #0f3460, #533483);
    color: #f8f9fa;
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 8px 8px 0 0;
}

/* 列表样式 */
.xpanel .bcontent ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.xpanel .bcontent ul li {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-left: 3px solid #00dbde;
    transition: all 0.3s ease;
}

.xpanel .bcontent ul li:hover {
    background: rgba(0, 219, 222, 0.1);
    transform: translateX(5px);
}

/* 左右布局 */
.leftrt {
    color: #00dbde;
    text-shadow: 0 0 5px rgba(0, 219, 222, 0.3);
}

.rightrt {
    color: #fc00ff;
}

/* 图片样式 */
.bcontent img {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 工具类 */
.no-bg {
    background: transparent !important;
}

/* 地图弹窗 */
.ol-popup {
    background: #1e1e2e;
    border: 1px solid #533483;
    box-shadow: 0 0 15px rgba(83, 52, 131, 0.5);
    color: #e6e6e6;
}

.ol-popup:after {
    border-top-color: #1e1e2e;
}

/* 响应式设计 */
@media (max-width: 1919px) {
    .xpanel .title {
        font-size: 16px;
        padding: 10px 20px;
    }

    .xpanel .bcontent {
        padding: 15px;
    }
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#00dbde, #fc00ff);
    border-radius: 3px;
}

.map {
    width: 100%;
    height: 100vh;
    position: relative;
    position: relative;
    overflow: hidden;
}

.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer:after {
    content: "✖";
}

.bcontent {
    height: 100%;
}

#jqCharts,
#wzCharts,
#wlCharts {
    width: 100%;
    height: 100%;
    /* 确保容器有高度 */
}

#ryCharts {
    width: 100%;
    height: 100%;
    /* 确保容器有高度 */
}
</style>